<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hugging Face Model Storage Checker</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: Helvetica, Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.5;
    }
    
    h1 {
      margin-bottom: 20px;
    }
    
    .input-container {
      margin-bottom: 20px;
    }
    
    input {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      font-family: Helvetica, Arial, sans-serif;
    }
    
    button {
      background-color: #4b9cd3;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    
    button:hover {
      background-color: #3d8bc0;
    }
    
    .result {
      margin-top: 20px;
      padding: 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      display: none;
    }
    
    .loading {
      display: none;
      margin-top: 20px;
    }
    
    .error {
      color: #d9534f;
      margin-top: 20px;
      display: none;
    }
    
    .storage-info {
      font-size: 18px;
      font-weight: bold;
    }
    
    .model-name {
      margin-bottom: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Hugging Face model storage checker</h1>
  
  <div class="input-container">
    <p>Enter a Hugging Face model URL or just the model path:</p>
    <input type="text" id="modelInput" placeholder="e.g., https://huggingface.co/mlx-community/Llama-3.2-3B-Instruct-4bit or mlx-community/Llama-3.2-3B-Instruct-4bit">
    <button id="checkButton">Check Storage</button>
  </div>
  
  <div id="loading" class="loading">Loading...</div>
  <div id="error" class="error"></div>
  <div id="result" class="result">
    <div class="model-name" id="modelName"></div>
    <div class="storage-info" id="storageInfo"></div>
  </div>

  <script type="module">
// Function to format bytes into MB/GB
function formatBytes(bytes) {
  if (bytes === 0) return '0 Bytes';
  
  const mb = bytes / (1024 * 1024);
  
  if (mb < 1000) {
    return mb.toFixed(2) + ' MB';
  } else {
    const gb = mb / 1024;
    return gb.toFixed(2) + ' GB';
  }
}

// Function to extract model path from input
function extractModelPath(input) {
  input = input.trim();
  
  // Check if it's a full URL
  if (input.startsWith('https://huggingface.co/')) {
    return input.replace('https://huggingface.co/', '');
  }
  
  return input;
}

// Function to fetch model info
async function fetchModelInfo(modelPath) {
  try {
    const apiUrl = `https://huggingface.co/api/models/${modelPath}`;
    const response = await fetch(apiUrl);
    
    if (!response.ok) {
      throw new Error(`Failed to fetch data (status: ${response.status})`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    throw error;
  }
}

// Main function
document.getElementById('checkButton').addEventListener('click', async () => {
  const input = document.getElementById('modelInput').value;
  
  if (!input) {
    showError('Please enter a model URL or path');
    return;
  }
  
  const resultElement = document.getElementById('result');
  const loadingElement = document.getElementById('loading');
  const errorElement = document.getElementById('error');
  
  resultElement.style.display = 'none';
  loadingElement.style.display = 'block';
  errorElement.style.display = 'none';
  
  try {
    const modelPath = extractModelPath(input);
    const modelInfo = await fetchModelInfo(modelPath);
    
    // Check if usedStorage exists
    if (modelInfo.usedStorage === undefined) {
      throw new Error('Storage information not available for this model');
    }
    
    // Display the result
    document.getElementById('modelName').textContent = `Model: ${modelInfo.modelId}`;
    document.getElementById('storageInfo').textContent = `Storage: ${formatBytes(modelInfo.usedStorage)}`;
    
    resultElement.style.display = 'block';
  } catch (error) {
    showError(error.message);
  } finally {
    loadingElement.style.display = 'none';
  }
});

function showError(message) {
  const errorElement = document.getElementById('error');
  errorElement.textContent = message;
  errorElement.style.display = 'block';
}

// Add event listener for Enter key
document.getElementById('modelInput').addEventListener('keypress', function(event) {
  if (event.key === 'Enter') {
    document.getElementById('checkButton').click();
  }
});
  </script>
</body>
</html>
